<!-- 
  什么是template
    翻译名称为  模板
  在这个标签出现之前，
  vue是没有的
  当template标签出现之后
  vue很快问世,
  但是template 不是一个标准的标签，
  多用于对标签的渲染，用在vue的语法里面最多;
  并且template下面需要有一个，根元素一般使用div（无样式标签）

  每一个 vue文件 都需要有 template标签
 -->
<template>
  <!-- 写页面的结构 -->
  <!-- 根元素 -->
  <div class="app">
    <!-- 使用的时候可以是单标签 -->
    <!-- <HelloVue /> -->
    <!-- 使用的时候可以是双标签
      使用的时候自定义标签名
    -->
    <!-- <HelloVue></HelloVue> -->
    <!-- 名字的使用方式 -->
    <!-- <hello-vue></hello-vue> -->



    <!-- 计算器组件 -->
    <!-- 使用的时候就相当于把组件里面的实例单独拉出来 复制了一份
      也就是每一个使用的地方都是独立的
    -->
    <!-- <computed />
    <computed />
    <computed />
    <computed />
    <computed /> -->

    <password />

    <star />

    <step />
  </div>
  <!-- 
    单纯的vue文件都是一个组件
    每一个组件都是独立的
   -->
</template>

<!-- js脚本 -->
<script>
// 引入子组件hello Vue
// import HelloVue from './components/HelloVue.vue';
// 引入计算器组件
// import computed from './components/computed.vue';
// 引入密码框的组件
import password from './components/homework/password.vue'
// 引入星星组件
import star from './components/homework/start.vue'
// 引入步骤条组件
import step from './components/homework/step.vue'
// 需要把一个对象导出才能够使用
// vue对象
export default {
  // 注册组件
  components:{
    password,
    star,
    step
    // 组件名字
    // HelloVue,
    // // 相当于
    // // HelloVue: HelloVue
    // computed
  },
  // 这个对象会默认 是当前的vue文件专属的一个 vue实例
  // data 必须是一个函数
  data(){
    // 把所有的数据 打包成一个对象返回出去
    return {
      number: 123
    }
  }
}
</script>

<!-- 样式 -->
<style lang="scss" scoped>
  // lang="使用什么样的css语法编译"
  // scoped 样式私有化 当前的样式仅仅在当前的vue文件中使用
 
</style>